<!-- 逻辑 -->
<script setup lang="ts">
import { ref } from 'vue';

const imgUrl = ref('https://tse3-mm.cn.bing.net/th/id/OIP-C.dGnfOk9WPUoRKeB9q80JVQHaE8?cb=iwc1&rs=1&pid=ImgDetMain')

const changeImg = () => {
  imgUrl.value = 'https://so1.360tres.com/t014ce0f92e521db24b.png'
}

const isBlue = ref(false)
const isOrange = ref(false)

const toggleClass = () => {
  isBlue.value = !isBlue.value
  isOrange.value = !isOrange.value
}
</script>

<!-- 结构 -->
<template>
<!-- v-bind 基本用法 v-bind:属性名, 简写是 :属性名 -->
<!-- <img @click="changeImg" v-bind:src="imgUrl" alt=""> -->
<img @click="changeImg" :src="imgUrl" alt="">

<!-- :class="{类名是否生效的表达式}" -->
<div @click="toggleClass" class="box" :class="{skyblue: isBlue, orange: isOrange}"></div>
</template>

<!-- 样式 -->
<style scoped>
img{
  width: 200px;
  height: 200px;
}
.box {
  width: 100px;
  height: 100px;
  border: 1px black solid;
}
.skyblue {
  background-color: skyblue;
}
.orange {
  border-color: orange;
}
</style>